import { useEffect, useRef } from "react";
import {
    ArcRotateCamera, Color4, Engine, HemisphericLight, Mesh, MeshBuilder, Plane, Scene, UniversalCamera,
    StandardMaterial, Vector3, Color3, DirectionalLight, Animation, CircleEase, EasingFunction, VertexBuffer, BackgroundMaterial, Texture, Ray, Matrix, RayHelper, Vector4, SpriteManager, ParticleSystem, GPUParticleSystem, CubeTexture,
} from '@babylonjs/core';
import Default from "../02-着色器/Default";
import Demo01 from "../02-着色器/Demo01";
import Demo02 from "../02-着色器/Demo02";
import Demo03 from "../02-着色器/Demo03";
import Demo04 from "../02-着色器/Demo04-WebGPU";


const canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;


// const defalut = new Default(canvas);
// const demo01 = new Demo01(canvas);
const demo02 = new Demo02(canvas);//像素遮罩
// const demo03 = new Demo03(canvas);//fov
// const demo04 = new Demo04(canvas);//WebGPU



const RenderStructure = () => {
    const divRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        const { current } = divRef;
        if (current != null) {
            current.innerHTML = '';
            current.append(canvas);
        }
    }, []);
    return (
        <div>
            <div ref={divRef}>

            </div>
        </div>
    );
};

export default RenderStructure;

